
function rotate(btn1,btn2,list) {
	var oInput3 = document.getElementById(btn1);
	var oInput4 = document.getElementById(btn2);
	var oUl = document.getElementById(list);
	var aLi = oUl.getElementsByTagName('li');
	
	var oneSize = aLi[0].offsetWidth;
	var iNum = 4;
	var bBtn = true;
	
	function getWidth(){
		oUl.style.width = aLi.length * oneSize + 'px';
	}
	getWidth();

	oInput4.onclick = function(){
		if(bBtn){
			bBtn = false;
			for(var i=0;i<iNum;i++){
				var oLi = aLi[i].cloneNode(true);
				oUl.appendChild(oLi);
				getWidth();
			}
			
			startMove(oUl,{left : - iNum * oneSize},function(){
				for(var i=0;i<iNum;i++){
					oUl.removeChild(aLi[0]);
					oUl.style.left = 0;
				}
				bBtn = true;
			});
		}
	};

	oInput3.onclick = function(){		
		if(bBtn){
			bBtn = false;
			for(var i=0;i<iNum;i++){
				var oLi = aLi[aLi.length - 1 - i].cloneNode(true);
				oUl.insertBefore(oLi,oUl.childNodes[0]);
				oUl.style.left = - (i+1)*oneSize + 'px';
				//oUl.appendChild(oLi);
				getWidth();
			}
			
			startMove(oUl,{left : 0},function(){
				for(var i=0;i<iNum;i++){
					oUl.removeChild(aLi[aLi.length-1]);
					oUl.style.left = 0;
				}
				bBtn = true;
			});
		}
	};
}
rotate("input3","input4","banner_list");
rotate("input1","input2","sm_list");


function move (btn1,btn2,wrap) {
	var oInput1 = document.getElementById(btn1);
	var oInput2 = document.getElementById(btn2);
	var oSongMenu = document.getElementById(wrap);

	oSongMenu.onmouseover = function(e) {	
		startMove(oInput1,{opacity : 70,left:0});
		startMove(oInput2,{opacity : 70,right:0});
		

	}
	oSongMenu.onmouseout = function(e) {
		startMove(oInput1,{opacity : 0,left:-70});
		startMove(oInput2,{opacity : 0,right:-70});
	}
}
move('input1','input2','songMenu');
move('input3','input4','banner');


